import React, {Component} from 'react'
import {View, Text, ListView, Image, TouchableHighlight, ActivityIndicator} from 'react-native'
import styles from '../comment_styles/styles'

const REQUEST_URL = 'https://api.douban.com/v2/movie/us_box'//北美票房榜

/**
 * 北美票房
 */
export default class USBox extends Component {
    static navigationOptions={
        title:'北美电影榜单'
    }

    constructor(props) {
        super(props)
        this.state = {
            movies: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            }),

            loaded: false
        }

        this.fetchData();
    };

    fetchData() {
        fetch(REQUEST_URL)
            .then(response => response.json())
            .then(responseData => {
                this.setState({
                    movies: this.state.movies.cloneWithRows(responseData.subjects),//subjects为豆瓣返回的数据节点
                    loaded: true
                });
            })
            .done();
    }

    renderMovieList(movie){
        return(
            <TouchableHighlight
                underlayColor='rgba(34, 26, 38, 0.1)' //这个属性只有在设置了onPress的情况下才能生效
                onPress={() => this.props.navigation.navigate('Detail',{title:movie.subject.title})}

                // onPress={() => {this.props.navigation.navigate('Detail')}}
                // onPress={() => console.log('《${movie.subject.title)}》被点了')}
            >
                <View style={styles.itemContainer}>
                    <Image
                        style={styles.image}
                        source={{uri:movie.subject.images.large}}
                    />

                    <View
                        style={styles.textContent}
                    >

                        <Text style={styles.itemContent}>{movie.subject.title}</Text>

                        <Text style={styles.itemOriginal} >{movie.subject.original_title}( {movie.subject.year} )</Text>

                        <Text style={styles.itemTime}>{movie.subject.rating.average}</Text>
                    </View>
                </View>
            </TouchableHighlight>
        )
    }

    render() {

        if (!this.state.loaded) {//这里不能使用this.props.loaded
            return (
                <View style={styles.container}>
                    <View style={styles.loading}>
                      <ActivityIndicator
                        size='large'
                        color='#6435c9'
                      />
                    </View>
                </View>
            );
        }

        return (
            <View style={styles.container}>
                <ListView
                    dataSource={this.state.movies}
                    renderRow={
                        //title为subjects数组中的字段 => 前的字段可以任意改写
                        // movie => <Text style={styles.textItem}>{movie.title}</Text>
                        this.renderMovieList = this.renderMovieList.bind(this)
                    }
                />
            </View>
        )
    }
}